<script setup>
import { ref, onMounted } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import { useUserStore } from '@/stores/index.js'
import { useSetUserService } from '@/api/request.js'
import { ElMessage, ElMessageBox } from 'element-plus'
// 用户仓库实例
const userStore = useUserStore()

// 表单实例
const form = ref()

// 表单model实例
const userFormData = ref({
  id: '',
  nickname: '',
  email: ''
})

onMounted(() => {
  Object.assign(userFormData.value, userStore.user)
})

// 表单校验规则
const rules = {
  nickname: [
    {
      required: true,
      message: '用户昵称不得为空',
      trigger: 'blur'
    },
    {
      pattern: /^\S{3,7}$/,
      message: '用户昵称应在3-7位',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '邮箱不得为空',
      trigger: 'blur'
    },
    {
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: '邮箱格式有误',
      trigger: 'blur'
    }
  ]
}

// 清除表单
const resetFromData = () => {
  Object.assign(userFormData.value, { id: '', nickname: '', email: '' })
}
// 提交回调
const save = async () => {
  ElMessageBox.confirm('您确定要修改吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await form.value.validate()
    await useSetUserService(userFormData.value)
    await userStore.saveUserInfo()
    ElMessage.success('修改成功')
  })
}
</script>

<template>
  <div class="user-info">
    <PageContainer title="基本资料">
      <template #main>
        <div class="card_main">
          <el-form
            :model="userFormData"
            :rules="rules"
            ref="form"
            style="width: 500px"
          >
            <el-form-item label="登录名称" label-width="80px">
              <el-input
                type="text"
                size="large"
                :disabled="true"
                :value="userStore.user.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname" label-width="80px">
              <el-input
                type="text"
                size="large"
                placeholder="请输入用户昵称"
                v-model="userFormData.nickname"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email" label-width="80px">
              <el-input
                type="text"
                size="large"
                placeholder="请输入用户邮箱"
                v-model="userFormData.email"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button type="primary" plain @click="save"> 提交修改 </el-button>
            <el-button type="success" plain @click="resetFromData">
              重置
            </el-button>
          </div>
        </div>
      </template>
    </PageContainer>
  </div>
</template>

<style scoped lang="less">
.card_main {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
